<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Scanner</title>
    <script src="./assets/aframe.js"></script>
    <script src="./assets/mindar-image.js"></script>
    <script src="./assets/mindar-aframe.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        .a-canvas {
            width: 100vw !important;
            height: 100vh !important;
            display: block;
        }
    </style>
</head>
<body>
<a-scene
        mindar-image="imageTargetSrc: ./models/hiro.mind; autoStart: true;"
        embedded
        vr-mode-ui="enabled: false"
        loading-screen="enabled: false"
>
    <a-camera active="false"></a-camera>

    <a-entity mindar-image-target="targetIndex: 0">
        <a-box
                position="0 0.5 0"
                width="0.5"
                height="0.5"
                depth="0.5"
                color="#4CC3D9"
                rotation="0 45 0"
                animation="property: rotation; to: 0 405 0; loop: true; dur: 3000"
        ></a-box>

        <a-sphere
                position="0 1.2 0"
                radius="0.2"
                color="#EF2D5E"
                animation="property: position; to: 0 1.5 0; dir: alternate; loop: true; dur: 1500"
        ></a-sphere>

        <a-text
                value="Hello AR!"
                position="0 2.0 0"
                align="center"
                color="#FFFFFF"
                width="3"
        ></a-text>

        <a-entity
                position="0 0.8 0"
                particle-system="preset: snow; color: #4CC3D9, #EF2D5E; particleCount: 20"
        ></a-entity>
    </a-entity>

    <a-entity light="type: ambient; color: #BBB; intensity: 0.6"></a-entity>
    <a-entity light="type: directional; color: #FFF; intensity: 0.8" position="5 5 5"></a-entity>
</a-scene>
</body>
</html>